.reading-statistics-container {
  padding: 0;
  background: #f5f7fa;
  min-height: calc(100vh - 64px);

  // 统计卡片样式
  .stat-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    height: 100%;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .ant-card-body {
      padding: 20px;
    }

    .stat-header {
      margin-bottom: 12px;

      .stat-title {
        font-size: 14px;
        color: #8c8c8c;
      }
    }

    .stat-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;

      .stat-main {
        flex: 1;

        .stat-value {
          font-size: 28px;
          font-weight: 600;
          color: #262626;
          margin-bottom: 8px;
        }

        .stat-trend {
          font-size: 12px;
          display: flex;
          align-items: center;
          gap: 4px;

          &.up {
            color: #ff4d4f;
          }

          &.down {
            color: #52c41a;
          }
        }
      }

      .stat-chart {
        width: 120px;
        height: 60px;
      }
    }
  }

  // 图表卡片样式
  .chart-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    height: 100%;

    .ant-card-head {
      border-bottom: 1px solid #f0f0f0;

      .ant-card-head-title {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
      }

      .ant-card-extra {
        a {
          color: #1890ff;
          font-size: 14px;

          &:hover {
            color: #40a9ff;
          }
        }
      }
    }

    .ant-card-body {
      padding: 24px;
    }
  }

  // 排行榜卡片样式
  .rank-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    height: 100%;

    .ant-card-head {
      border-bottom: 1px solid #f0f0f0;

      .ant-card-head-title {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
      }

      .ant-card-extra {
        a {
          color: #1890ff;
          font-size: 14px;

          &:hover {
            color: #40a9ff;
          }
        }
      }
    }

    .ant-card-body {
      padding: 16px;
    }

    .ant-table {
      .ant-table-thead > tr > th {
        background: #fafafa;
        font-weight: 600;
        color: #262626;
        border-bottom: 1px solid #f0f0f0;
        padding: 12px 16px;
      }

      .ant-table-tbody > tr {
        transition: all 0.3s ease;

        &:hover {
          background: #f5f7fa;

          td {
            background: transparent;
          }
        }

        td {
          padding: 12px 16px;
          border-bottom: 1px solid #f5f5f5;
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .stat-card {
      .stat-content {
        flex-direction: column;
        align-items: flex-start;

        .stat-chart {
          width: 100%;
        }
      }
    }
  }
}
